<template>
    <div class="flex flex-1">
        <el-button class="my-button" type="primary" plain @click="goTo('PasteOper')">锡膏作业</el-button>
        <el-button class="my-button" type="primary" plain @click="goTo('ScraperOper')">刮刀作业</el-button>
        <el-button class="my-button" type="primary" plain @click="goTo('StencilOper')">钢网作业</el-button>
    </div>
    <div class="flex flex-2">
        <el-button class="my-button" type="primary" plain>湿敏件作业</el-button>
        <el-button class="my-button" type="primary" plain>上科作业</el-button>
        <!-- <el-button class="my-button" type="primary" plain>工站作业</el-button> -->
    </div>
    <!-- <Login ref="loginRef" /> -->
</template>
<script lang="ts" setup>
// import Login from './Login.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()

defineOptions({ name: 'Home' })

const loginRef = ref()

const init = () => {
    loginRef?.value?.open()
}

const goTo = (name: string) => {
    router.push({
        name
    })
}
onMounted(() => init())
</script>

<style scoped lang="less">
.flex {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    justify-content: space-between;
    align-content: center;
    position: absolute;
    left: 50%;
    margin-left: -350px;

    .my-button {
        width: 200px;
        height: 120px;
        margin: 0;
    }

}

.flex-1 {
    top: 90px;
}

.flex-2 {
    width: 500px;
    top: 260px;
    margin-left: -250px;
    justify-content: space-around;
}

:deep(.el-button > span) {
    font-size: 20px;
}
</style>